<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet">
</head>
<style>
    table {
        width: 100%;
    }
    
    .img_a {
        width: 100px;
    }
    
    .none {
        width: 250px;
        height: 100px;
        background-color: rgb(77, 255, 0);
        display: none;
    }
    
    .zp {
        background-color: rgb(0, 183, 255);
    }
    
    .xce_a {
        position: fixed;
        top: 30%;
        left: 40%;
        background-color: aqua;
        z-index: 1;
        display: none;
    }
</style>

<body>
    <div class="layui-layout layui-layout-admin">


        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 11</a></dd>
                        <dd><a href="javascript:;">menu 22</a></dd>
                        <dd><a href="javascript:;">menu 33</a></dd>
                    </dl>
                </li>
            </ul>


            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> tester
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">Your Profile</a></dd>
                        <dd><a href="javascript:;">Settings</a></dd>
                        <dd><a href="javascript:;">Sign out</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">


                <div class="xce_a">
                    <h1>修改的相册</h1>
                    名称：<input type="text" name="" id="">
                    <br> 照片：
                    <input type="text" name="" id="">
                    <br>
                    <button onclick="put_A()">修改</button>
                    <button onclick="noneput()">取消修改</button>
                </div>



                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">menu group 1</a>


                    </li>

                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">

                </blockquote>
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">

                    </div>
                    <div class="xce">
                        <h1>相册操作</h1>

                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 单图片上传
                          </button>
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                        <hr style="margin: 21px 0;">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                              <i class="layui-icon layui-icon-upload"></i> 多图片上传
                            </button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                                预览图：
                                <div class="layui-upload-list" id="upload-demo-preview"></div>
                            </blockquote>
                        </div>

                        <div class="none">
                            名称:
                            <input type="text" name="" id="" class="zp">
                            <br> 照片:
                            <input type="text" name="" id="" class="zpa">
                            <br>
                            <button onclick="put()">修改</button>
                            <button onclick="none()">取消</button>
                        </div>
                        <br> id搜索:
                        <input type="text" name="" id="" class="search">
                        <br>
                        <button onclick="search()">搜索</button>
                    </div>

                    <!-- //------------------------------------------------------------------------- -->
                    <div class="zp">
                        <h1>照片操作</h1>
                        id搜索:
                        <input type="text" name="" id="" class="inpu_a5">
                        <br>
                        <button onclick="search_a()">搜索</button>
                    </div>

                    <br>

                </div>

                <div class="layui-card-body">


                    <table border="1px">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>名称</th>
                                <th>照片</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>

                    </table>



                </div>
            </div>
            <br><br>
        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script>
    <script>
        //JS 


        function apply() {
            $.ajax({
                url: 'http://localhost:3000/list',
                type: 'get',
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    $('tbody').html('')
                    res.forEach(item => {
                        $('tbody').append(`
                        <tr>
                            <th>${item.id}</th>
                            <th>${item.imgname}</th>
                            <th><img src='${item.img}' class="img_a" onclick="img_A(${item.id})""></th>
                            <th><button onclick="del(${item.id})">删除</button><button onclick="put(${item.id})">修改</button></th>
                        </tr>
                    `)
                    });
                },
            })

        }
        apply()

        //添加
        function add() {
            $.ajax({
                url: 'http://localhost:3000/add',
                type: 'post',
                data: {
                    imgname: $('input').eq(0).val(),
                    img: $('input').eq(1).val(),
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    apply()
                },
            })
        }
        //删除

        function del(id) {
            $.ajax({
                url: 'http://localhost:3000/del',
                type: 'post',
                data: {
                    id
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    apply()
                },
            })
        }

        var iid;
        //修改
        function put(id) {
            var xce_a = document.querySelector('.xce_a')
            console.log(xce_a);

            iid = id
            console.log(iid);
        }

        function put_A() {
            $('.xce_a').hide()
            console.log(iid);
        }



        function noneput() {
            $('.xce_a').hide()
        }


        //查找
        function search() {
            $.ajax({
                url: 'http://localhost:3000/search',
                type: 'post',
                data: {
                    id: $('.search').val(),
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    $('tbody').html('')
                    res.forEach(item => {
                        $('tbody').append(`
                    <tr>
                        <th>${item.id}</th>
                        <th>${item.imgname}</th>
                        <th><img src='${item.img}' class="img_a"></th>
                        <th><button onclick="del(${item.id})">删除</button><button onclick="put(${item.id})">修改</button></th>
                    </tr>
                            `)
                    });
                },
            })
        }


        //进入相册
        function img_A(id) {
            $.ajax({
                url: 'http://localhost:3000/photo',
                type: 'post',
                data: {
                    id,
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    $('tbody').html('')
                    res.forEach(item => {
                        $('tbody').append(`
                    <tr>
                        <th>${item.id}</th>
                        <th>${item.zp_id}</th>
                        <th><img src='${item.zp_img}' class="img_a"></th>
                        <th><button onclick="del_A(${item.id})">删除</button><button onclick="put_a(${item.id})">修改</button></th>
                    </tr>
                            `)
                    });
                },
            })

        }

        // function img_A() {
        //     $('.xce').hide()
        // }




        //照片删除
        function del_A(id) {
            $.ajax({
                url: 'http://localhost:3000/del_a',
                type: 'post',
                data: {
                    id
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    apply()
                },
            })
        }

        //照片搜索
        function search_a() {
            $.ajax({
                url: 'http://localhost:3000/search_a',
                type: 'post',
                data: {
                    id: $('.inpu_a5').val(),
                },
                dataType: "json",
                success: (res) => {
                    console.log(res);
                    $('tbody').html('')
                    res.forEach(item => {
                        $('tbody').append(`
                    <tr>
                        <th>${item.id}</th>
                        <th><img src='${item.zp_img}' class="img_a"></th>
                        <th><button onclick="del_A(${item.id})">删除</button><button onclick="put_a(${item.id})">修改</button></th>
                    </tr>
                            `)
                    });
                },
            })
        }


        var idd;

        function put(id) {
            idd = id
            console.log(idd);
        }





        layui.use(['element', 'layer', 'util'], function() {


            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function(othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', {
                        icon: 0
                    });
                },
                menuRight: function() { // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
        });
    </script>


    <!-- <script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
    <script>
        layui.use(function() {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: 'http://localhost:3000/add', // 实际使用时改成您自己的上传接口即可。

                before: function(obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {
                        icon: 16,
                        time: 0
                    });

                },
                done: function(res) {
                    // 若上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    // …
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function() {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function() {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function(n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {
                            icon: 1
                        });
                        var img = document.querySelector('layui-upload-img').rc
                    }
                }
            });
            // 多图片上传
            upload.render({
                elem: '#ID-upload-demo-btn-2',
                url: 'http://localhost:3000/add', // 实际使用时改成您自己的上传接口即可。
                multiple: true,
                before: function(obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result) {
                        $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                    });
                },
                done: function(res) {}
            });
        });
    </script> -->
</body>

</html>